<template>
	<view id="map" class="map">
		<view id="map-earth" class="map-earth"></view>
		<view class="map-grid"></view>
		<view class="map-light"></view>
		<view id="map-chart" class="map-chart"></view>
	</view>
</template>
 
<script>
	
	drawMyMap3()
	  
	export default {
		name:"map",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
// 中间下半部分的地图
			.map {
				height: 1300upx;
				width: 100%;
				// height: @earth-size;
				// width: @earth-size;
				// border: solid 1px lightgray;

				position: relative;

				.map-earth {
					height: @earth-size;
					width: @earth-size;
					background: url(../static/images/map-earth.png);
					background-size: 100% 100%;
					// border: solid 1px red;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.map-grid {
					height: @earth-size * 1.3;
					width: @earth-size * 1.3;
					background: url(../static/images/lbx.png);
					background-size: 100% 100%;
					// border: solid 1px red;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					animation: map-grid-rotate 20s linear infinite;
				}

				@keyframes map-grid-rotate {
					from {
						transform: translate(-50%, -50%) rotate(0deg);
					}

					to {
						transform: translate(-50%, -50%) rotate(360deg);
					}
				}

				.map-light {
					height: @earth-size * 1;
					width: @earth-size * 1;
					background: url(../static/images/jt.png);
					background-size: 100% 100%;
					// border: solid 1px red;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					animation: map-light-rotate 10s linear infinite;
				}

				@keyframes map-light-rotate {
					from {
						transform: translate(-50%, -50%) rotate(360deg);
					}

					to {
						transform: translate(-50%, -50%) rotate(0deg);
					}
				}

				position: relative;

				.map-chart {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 1620upx;
				}
			}
</style>
